// window.addEventListener('load', function () {
//     for (var i = 0; i < 12; i++) {
//         var ul = document.querySelector('.expend');
//         var li = document.createElement('li');
//         li.innerHTML = '<a href="javascript:;">话费</a>';
//         ul.appendChild(li);
//     }

// })
window.addEventListener('load', function () {
    //遍历实现背景图定位
    var span = document.getElementsByClassName('service_img');
    // console.log(span);
    for (var i = 0; i < span.length; i++) {
        var index = i * 52;
        span[i].style.backgroundPosition = '-253px -' + index + 'px';
    }
    var focus = document.querySelector('.focus');
    var banner = document.querySelector('.banner_img');
    var ul = document.querySelector('.circle');
    var imgWidth = banner.children[0].offsetWidth;
    // console.log(imgWidth);
    //动态创建小圆点
    for (var i = 0; i < banner.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ul.appendChild(li);
        // 点击小圆点，图片跟随跳转
        li.addEventListener('click', function (e) {
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].className = '';
            }
            this.className = 'cursor';
            var index = this.getAttribute('index');
            animate(banner, -index * imgWidth);
            num = index; //把小圆圈的值给num。
        })
        // console.log(li);
    }
    // 鼠标经过轮播图时，左右按钮出现
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        window.clearInterval(timer);
        timer = null;
    })
    // 鼠标离开时，左右按钮隐藏
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = window.setInterval(function () {
            arrow_r.click();
        }, 3000);
    })
    // 无缝跳转。克隆第一个图片
    var li = banner.children[0].cloneNode(true);
    banner.appendChild(li);
    ul.children[0].className = 'cursor';
    // console.log(banner.children.length);
    // 点击左侧按钮，实现跳转
    var arrow_r = document.querySelector('.arrow_r');
    var arrow_l = document.querySelector('.arrow_l');
    var num = 0;
    arrow_l.addEventListener('click', function () {
        if (num == 0) {
            // console.log(num);
            banner.style.left = -(banner.children.length - 1) * imgWidth + 'px';
            num = banner.children.length - 1;
        }
        num--;
        animate(banner, (-num * imgWidth));
        for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].className = '';
        }
        ul.children[num].className = 'cursor';
    });
    // 点击右侧按钮，实现跳转
    arrow_r.addEventListener('click', function () {
        if (num == banner.children.length - 1) {
            console.log(num);
            banner.style.left = 0;
            num = 0;
        }
        num++;
        animate(banner, (-num * imgWidth));
        for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].className = '';
        }
        if (num < ul.children.length) {
            ul.children[num].className = 'cursor';
        } else {
            ul.children[0].className = 'cursor';
        }

    });
    // 定时跳转
    var timer = window.setInterval(function () {
        arrow_r.click();
        console.log('len=' + bd_02_list.children.length);
        sums();
        animate(bd_02_img, (-sum * bd_02_imgWidth));
    }, 3000);
    /*   banner轮播图结束 */
    // 电器轮播图
    var floor_02 = document.querySelector('.floor_bd_02');
    var bd_02_list = document.querySelector('.bd_02_list');
    var bd_02_img = document.querySelector('.bd_02_img');
    var bd_02_imgWidth = floor_02.offsetWidth;
    for (var i = 0; i < bd_02_list.children.length; i++) {
        bd_02_list.children[i].setAttribute('index', i);
    }
    var sum = 0;
    function sums() {
        if (sum == bd_02_list.children.length) {
            sum = 0;
            bd_02_img.style.left = '0';
        }
        sum++;
        console.log('sum= ' + sum);

    }
})
